<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./cartpage.css">
		<link rel="stylesheet" href="./font/iconfont.css">
	</head>
	<body>
		<div class="top">
			<div class="top-up">
				<span class="iconfont icon-dianhua font1"></span>
				<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
				<img src="./img/2.png" alt="" class="fendi">
				<div class="top-right">
					<a href="#">FENDI与<span class="person"></span></a>
					<a href="personcenter.html">我的订单</a>
					<span class="iconfont icon-sousuo font2"></span>
					<span class="iconfont icon-nanzhuang font3"></span>
				</div>
			</div>
			<div class="nav">
				<ul>
					<li>女士
						<div class="menu1">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>
		
							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>
		
							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>
		
							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>男士
		
						<div class="menu2">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>
		
							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>
		
							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>
		
							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					<li>童装
						<div class="menu3">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>
		
							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>
		
							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>
		
							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>婚礼灵感
						<div class="menu4">
							<div class="menu4-dl">
								<dl>
									<dt>她的礼物</dt>
									<dd><img src="./img/5.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Fendi x Chaos</a></dd>
									<dd><a href="#">春夏系列2021</a></dd>
									<dd><a href="#">Fendi Peekaboo</a></dd>
									<dd><a href="#">Fendi Baguette</a></dd>
								</dl>
								<dl>
									<dt>他的礼物</dt>
									<dd><img src="./img/4.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Peekaboo</a></dd>
									<dd><a href="#">Baguette</a></dd>
									<dd><a href="#">单肩包</a></dd>
									<dd><a href="#">手提包</a></dd>
								</dl>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="main">
			<p>购物袋</p>
		</div>
		<div class="cart">
			<div class="cart-left">
				<div class="cart-up">
				<input type="checkbox" id="input" checked="">
				<img src="" alt="">
				<div class="introduce">
				<h5></h5>
				<i></i>
				<h4></h4>
				<h6><span></span></h6>
				</div>
				<div class="number">
					<span class="sub">-</span>
					<span class="count">1</span>
					<span class="add">+</span>
				</div>
				<i class="false">×</i>
				<b></b>
			</div>
			<div class="cart-down">
				<div class="total">
					<ul>
						<li>共<span></span>件商品<i class="price1">￥0</i></li>
						<li>运费<i>免邮</i></li>
						<li>总计<i class="totalprice">￥0</i></li>
					</ul>
				</div>
				<input type="checkbox" id="choice">全选
				<p style="cursor:pointer;">提交订单</p>
			</div>
			</div>
			<div class="cart-right">
				<ol>
					<li>免费配送和退货<span>+</span></li>
					<li>我们能帮助你吗<span>+</span></li>
					<li>销售条件<span>+</span></li>
				</ol>
			</div>
		</div>
		<div class="message">
			<p>订阅我们的新闻资讯</p>
			<p>要获得更多个性化内容，包括访问您所在地区的特殊活动和最新消息，请提供一下详细信息</p>
			<p>手机号码*</p>
			<b></b>
		</div>
		<div class="footer">
			<dl>
				<dt>客服关怀</dt>
				<dd>联系我们</dd>
				<dd>常见问题与解答</dd>
				<dd>订单与配送</dd>
				<dd>退货与退款</dd>
				<dd>追踪您的订单</dd>
			</dl>
			<dl>
				<dt>FENDI与我</dt>
				<dd>登录/注册</dd>
			</dl>
			<dl>
				<dt>企业</dt>
				<dd>寻找精品店</dd>
				<dd>Fendi Private Suites</dd>
				<dd>可持续性</dd>
				<dd>供应链透明化</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>关于FENDI</dd>
				<dd>Fendi的历史</dd>
				<dd>量身定做</dd>
				<dd>皮草工坊</dd>
				<dd>家居</dd>
				<dd>Fendi Boutique Hotel</dd>
				<dd>腕表</dd>
			</dl>
			<dl>
				<dt>法律咨询</dt>
				<dd>隐私条款</dd>
				<dd>销售条款与条件</dd>
				<dd>网站使用条款</dd>
				<dd>行为准则</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>
					<span class="iconfont icon-gongzhonghao"></span>
					<span class="iconfont icon-tubiao214"></span>
				</dd>
			</dl>
		</div>
		<div class="finally">
			<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
			<span>@FENDI-保留所有权</span>
			<span>沪ICP备1301824号-1</span>
			<span>沪公网安备31010602001819号</span>
			<span>上海工商</span>
		</div>
		<script src="jquery.min.js"></script>
		<script>
			//从数据库中拿到数据
			let address="http://127.0.0.1:81"
			let introduce=$(".introduce");
			let cartup=$(".cart-up");
			let number=$(".number");
			let sub=$(".number .sub");
			let count=$(".number .count");
			let add=$(".number .add");
			//获取localStorage里面的内容
			let goodsid=localStorage.getItem("goodsid");
			console.log(goodsid)
			$.ajax({
				url:`${address}/details`,
				data:{
					id:goodsid
				},
				success(data){
					cartup.find("img").attr("src",data.img);
					$(".total").find(".price1").html(data.price);
					$(".total").find(".totalprice").html($(".total").find(".price1").html());
				}
			})
			//添加商品数量
			add.click(function(){
				count.html(Number(count.html())+1);
				// console.log(count.html())
				//实现数量和总计功能
				const n=5900;
				$(".total").find("span").html(count.html());//总共的数量
				$(".total").find(".price1").html("￥"+Number(count.html()*n));//价格
				// console.log($(".total").find(".price1").html())
				 $(".totalprice").html($(".total").find(".price1").html())//总计
				// $(".total").find("i").html()
			})
			//实现减号功能
			sub.click(function(){
				if(count.html()==0){
					return;
				}
				count.html(Number(count.html())-1);
				console.log(count.html())
				const n=5900;
				$(".total").find("span").html(count.html());//总共的数量
				$(".total").find(".price1").html("￥"+Number(count.html()*n));//价格
				// console.log($(".total").find(".price1").html())
				 $(".totalprice").html($(".total").find(".price1").html())//总计
				// $(".total").find("i").html()
			})
			$(".cart-down p").click(function(){
				// alert(1)
				
				window.location.href=`${address}/truepage.html`;
			})
		</script>
	</body>
</html>

